<template>
  <view class="preview">
    <swiper circular @change="changeImage" :current="data.index">
      <swiper-item v-for="(item, index) in data.localImageList">
        <image @click="showMask" :src="item.picUrl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="mask" v-if="data.isShowMask">
      <view class="goBack f fac fpc" @click="goBack" :style="{top: data.statusBarHeight + 'px'}">
        <uni-icons type="left" size="20" color="#fff"></uni-icons>
      </view>
      <view class="count">{{data.index + 1}} / {{data.localImageList.length}}</view>
      <view class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </view>
      <view class="date">
        <uni-dateformat :date="new Date()" format="M月d日"></uni-dateformat>
      </view>
      <view class="op-box f fac">
        <view class="info item f fv fac" @click="getImageInfo">
          <uni-icons type="info" size="22"></uni-icons>
          <text>信息</text>
        </view>
        <view class="score item f fv fac" @click="openScorePopup">
          <uni-icons type="star" size="22"></uni-icons>
          <text v-if="data.localImageList[data.index].hasOwnProperty('userScore')">{{data.localImageList[data.index]?.userScore}}分</text>
          <text v-else>评分</text>
        </view>
        <view class="download item f fv fac" @click="downloadImage">
          <uni-icons type="download" size="22"></uni-icons>
          <text>下载</text>
        </view>
      </view>
    </view> 
    
    <uni-popup ref="infoPopupRef">
      <view class="popup-box">
        <view class="header f fac fpc">
          <text class="title">壁纸信息</text>
          <view class="close-btn" @click="closeImageInfoPopup">
            <uni-icons type="closeempty" size="16"></uni-icons>
          </view>
        </view>
        <scroll-view scroll-y="true">
          <view class="content">
            <view class="line f">
              <text class="name">壁纸ID：</text>
               <view class="text f1">{{dialogData.info._id}}</view>
            </view>
            <view class="line f">
              <text class="name">发布者：</text>
              <view class="text f1">{{dialogData.info.nickname}}</view>
            </view>
            <view class="line f">
              <text class="name">评分：</text>
              <view class="text f f1">
                <uni-rate readonly :value="dialogData.info.score" :size="20" />
                <text class="s">{{dialogData.info.score}}分</text>
              </view>
            </view>
            <view class="line f">
              <text class="name">摘要：</text>
              <view class="text f1">{{dialogData.info.description}}</view>
            </view>
            <view class="line f">
              <text class="name">标签：</text>
              <view class="text f1">
                <uni-tag v-for="item in dialogData.info.tabs" :key="item" inverted circle :text="item" type="success" />
              </view>
            </view>
            <view class="declare">
              声明：本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱1811082435@qq.com，管理将删除侵权壁纸，维护您的权益。
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    
    <uni-popup ref="scorePopupRef" :isMaskClick="false">
      <view class="popup-box score-box">
        <view class="header f fac fpc">
          <text class="title">壁纸评分</text>
          <view class="close-btn" @click="closeScorePopup">
            <uni-icons type="closeempty" size="16"></uni-icons>
          </view>
        </view>
        <view class="score-content f fv fac">
          <view class="text f fac fpj">
            <uni-rate :readonly="data.localImageList[data.index].hasOwnProperty('userScore')" v-model="dialogData.score" :size="30" />
            <text class="s">{{dialogData.score}}分</text>
          </view>
          <button v-if="!data.localImageList[data.index].hasOwnProperty('userScore')" type="default" size="mini" plain="true" :disabled="dialogData.score == 0" @click="submitScore">确认评分</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { getStatusBarHeight } from "@/utils/system.js"
import http from "@/api/api.js"

const infoPopupRef = ref(null)
const scorePopupRef = ref(null)
// 数据集
const data = reactive({
  // 是否显示遮罩层
  isShowMask: true,
  // 图片信息
  imageInfo: {},
  // 导航栏高度
  statusBarHeight: getStatusBarHeight(),
  // 本地缓存的分类图片列表
  localImageList: [],
  // 当前图片序号
  index: 1
})

// 弹窗
let dialogData = reactive({
  info: {},
  // 评分
  score: 0,
})

onLoad((option) => {
  // 获取本地缓存图片列表
  data.localImageList = uni.getStorageSync('classifyList').map(item => {
    return {
      ...item,
      picUrl: item.smallPicurl.replace("_small.webp", ".jpg")
    }
  })
  // 点击图片的序号
  data.index = parseInt(option.index)
})

// 左右切换swiper
const changeImage = (e) => {
  data.index = e.detail.current
}

// 点击图片显示/隐藏Mask
const showMask = () => {
  data.isShowMask = !data.isShowMask
}

// 获取图片信息
const getImageInfo = () => {
  let id = data.localImageList[data.index]._id
  http.getImageInfo({id}).then(res => {
    dialogData.info = res.data[0]
    infoPopupRef.value.open('bottom')
  })
}

// 关闭图片信息弹出层
const closeImageInfoPopup = () => {
  infoPopupRef.value.close()
}

// 打开评分弹出层
const openScorePopup = () => {
  dialogData.score = data.localImageList[data.index]?.userScore || 0
  scorePopupRef.value.open('center')
}

// 提交评分
const submitScore = () => {
  uni.showLoading({
  	title: '加载中'
  });
  let wallId = data.localImageList[data.index]._id
  let classid = data.localImageList[data.index].classid
  http.setScore({
    wallId, classid, userScore: dialogData.score
  }).then(res => {
    uni.hideLoading()
    // 更新本地缓存
    data.localImageList[data.index].userScore = dialogData.score
    uni.setStorageSync('classifyList', data.localImageList)
    data.localImageList = uni.getStorageSync('classifyList').map(item => {
      return {
        ...item,
        picUrl: item.smallPicurl.replace("_small.webp", ".jpg")
      }
    })
    uni.showToast({
      title: '评分成功',
      icon: 'none'
    })
    closeScorePopup()
  })
}

// 关闭评分弹出层
const closeScorePopup = () => {
  scorePopupRef.value.close()
    dialogData.score = 0
}

// 保存图片
const downloadImage = () => {
  let wallId = data.localImageList[data.index]._id
  let classid = data.localImageList[data.index].classid
  
  http.saveImage({wallId, classid}).then(res => {
    // 仅H5
    // #ifdef H5
    uni.showModal({
      content: "请长按保存壁纸",
      showCancel: false
    })
    // #endif
    // 除了H5以外的
    // #ifndef H5
    uni.downloadFile({
      url: data.localImageList[data.index].picUrl,
      success: res => {
        if (res.statusCode == 200) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '图片保存成功',
                icon: 'none',
              })
            },
            fail: (e) => {
              uni.showToast({
                title: '图片保存失败',
                icon: 'none',
              });
            }
          })
        } else {
          uni.showToast({
            title: '图片下载失败',
            icon: 'none',
          })
        }
      }
    })
    // #endif
  })
}

// 返回上一级
const goBack = () => {
  uni.navigateBack()
} 



</script>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100vh;
  swiper {
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    color: #fff;
    &>view {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .goBack {
      left: 30rpx;
      transform: translateX(0);
      border-radius: 50%;
      border: 1rpx solid rgba(0, 0, 0, 0.3);
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10rpx);
      overflow: hidden;
      width: 70rpx;
      height: 70rpx;
    }
    .count {
      top: 10vh;
      background-color: rgba(0, 0, 0, 0.3);
      font-size: 28rpx;
      padding: 10rpx 30rpx;
      border-radius: 40rpx;
    }
    .time {
      font-size: 120rpx;
      top: calc(10vh + 70rpx);
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .date {
      font-size: 30rpx;
      top: calc(10vh + 230rpx);
      text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
    }
    .op-box {
      bottom: 155rpx;
      background-color: rgba(255, 255, 255, 0.9);
      color: $text-font-color-2;
      padding: 18rpx 30rpx;
      font-size: 20rpx;
      border-radius: 100rpx;
      box-shadow: 0 2rpx rgba(0, 0, 0, 0.1);
      .item {
        margin: 0 40rpx;
        text {
          margin-top: 4rpx;
          white-space: nowrap;
        }
      }
    }
  }
  
  .popup-box {
    background-color: #fff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    padding: 0 30rpx;
    padding-bottom: 45rpx;
    font-size: 28rpx;
    .header {
      position: relative;
      .title {
        margin-top: 40rpx;
        color: $text-font-color-2;
      }
      .close-btn {
        position: absolute;
        top: 40rpx;
        right: 0;
        :deep() {
          .uni-icons {
            color: $text-font-color-2 !important;
          }
        }
      }
    }
    scroll-view {
      max-height: 800rpx;
    }
    .content {
      .line {
        margin-top: 50rpx;
        .name {
          color: #c1c1c1;
          width: 128rpx;
          text-align: right;
        }
        .text {
          .s {
            color: rgb(255, 202, 62);
            font-size: 26rpx;
            margin-left: 10rpx;
          }
          :deep() {
            .uni-tag--success--inverted {
              color: $main-theme-color !important;
              border-color: $main-theme-color !important;
              margin-right: 10rpx;
            }
          }
        }
      }
      .declare {
        margin-top: 40rpx;
        background-color: #f6f6f6;
        padding: 20rpx;
        border-radius: 8rpx;
        color: $text-font-color-2;
        font-size: 24rpx;
        letter-spacing: 1rpx;
      }
    }
  }
  .score-box {
    width: 528rpx;
    border-radius: 30rpx;
    .score-content {
      width: 100%;
      margin-top: 40rpx;
      .s {
        color: rgb(255, 202, 62);
        font-size: 36rpx;
        margin-left: 30rpx;
      }
      button {
        margin-top: 40rpx;
      }
    }
  }
}
</style>
